<template>
  <avue-form class="tree-form"
             :option="treeOption"
             v-model="ruleForm"></avue-form>
</template>

<script>
export default {
  name: 'treeSelectForm',
  props: {
    value: {
      default: ''
    },
    treeData: {
      type: Array,
      default: () => ([])
    },
    treeProps: {
      type: Object,
      default: () => ({
        value: 'id',
        label: 'orgName',
        children: 'children'
      })
    }
  },
  data () {
    return {
      ruleForm: {
        idOrg: this.value
      }
    }
  },
  watch: {
    ruleForm: {
      handler (val) {
        this.$emit('input', val.idOrg)
      },
      deep: true
    }
  },
  computed: {
    treeOption () {
      return {
        mockBtn: false,
        emptyBtn: false,
        submitBtn: false,
        labelWidth: 0,
        column: [{
          label: '',
          prop: 'idOrg',
          type: 'tree',
          span: 24,
          dicData: this.treeData,
          props: this.treeProps,
          value: this.editData
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .tree-form{
    width: 100%;
    margin: 0;
    padding: 0;
    ::v-deep .avue-form__row{
      width: 100% !important;
      padding: 0 !important;
      margin-top: 2px;
      & + .avue-form__menu{
        padding: 0;
      }
    }
    ::v-deep .el-form-item{
      margin: 0;
    }
  }
</style>
